react router dom Node.js | React | MongoDB | Express (6) 1. Create React App 구조 (structure) create react app명령 후 생기는 폴더와 파일들 실행 client > src > App.js 어디서 렌더링? -> client > src > index.js 어디서 페이지 표현? -> client > public > index.html webpack이 관리하는 부분 : src (public X) img 파일 넣고싶을때는... react router domReactnode.jsReact react-router-dom switch error 틀린점이 있다면 댓글로 알려주세요! 최신버전 react-router-dom에서 Attempted import error: 'Switch' is not exported from 'react-router-dom'. 이라는 에러가 발생했다. 최신버전인 V6에선 아래와 같이 Switch가 Routes로 대체되었고 exact 또한 사용할 필요가 없다고 한다 그래서 5.2버전으로 다운그레이드하거나 Ro... v6react router domreact router dom [React 에러 일지] ... is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> 🚫 [...] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> react-router-dom v6부터는, Switch 대신 Routes를 사용 Route 안에 component 대신 element 사용 그리고 <Routes> 자식으로는 <Route>만 가능하다.... Reactreact router domerrorReact [TIL] 2020/10/10 props check module : 노마드 코더의 클론 코딩(영화 웹 서비스) 해보기 clear : react에서 라우팅을 하도록 도와주는 패키지 : react-router-dom => 구조 분해 할당을 더욱 효율적으로 이용해보았다. react를 쓸 때는 웬만하면 구조 분해 할당으로 변수를 할당받자 오늘 배운 그리고 복습한 css : 클론 코딩을 가지고, 1) 검색기능 구현해보기 2) 각 ... 클론코딩Link toHashRouterRouteaxios vs fetchCSS@media only screenpush redirect반응형TILreact router domprop-type@media only screen History 만들기 이렇게 사용하던 중 history파일을 따로 만들어 사용하는 법을 배웠다 우선 Router를 꺼내오고 Router안에는 history가 꼭 들어가야 하는데 이 history파일을 따로 만들었다 history파일을 따로 만들고 createBrowerHistory로 BrowerHistory를 만들어준다 위 에 Router에 이 만든 history를 넣어준다 이것을 활용해서 navigate라는 함... ReactBrowerHistoryreact router domBrowerHistory 7월 9일 금요일 TIL <BrowserRouter> BrowserRouter는 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할을 해준다. ReactDOM의 렌더 단계인 index.js 에 넣어서 활용할 수도 있다. BrowserRouter가 상위에 작성되어 있어야 Route 컴포넌트를 사용할 수 있다. <Switch> <Route> 경로를 매칭... 31기TILreact router dom31기TIL
Node.js | React | MongoDB | Express (6) 1. Create React App 구조 (structure) create react app명령 후 생기는 폴더와 파일들 실행 client > src > App.js 어디서 렌더링? -> client > src > index.js 어디서 페이지 표현? -> client > public > index.html webpack이 관리하는 부분 : src (public X) img 파일 넣고싶을때는... react router domReactnode.jsReact react-router-dom switch error 틀린점이 있다면 댓글로 알려주세요! 최신버전 react-router-dom에서 Attempted import error: 'Switch' is not exported from 'react-router-dom'. 이라는 에러가 발생했다. 최신버전인 V6에선 아래와 같이 Switch가 Routes로 대체되었고 exact 또한 사용할 필요가 없다고 한다 그래서 5.2버전으로 다운그레이드하거나 Ro... v6react router domreact router dom [React 에러 일지] ... is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> 🚫 [...] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> react-router-dom v6부터는, Switch 대신 Routes를 사용 Route 안에 component 대신 element 사용 그리고 <Routes> 자식으로는 <Route>만 가능하다.... Reactreact router domerrorReact [TIL] 2020/10/10 props check module : 노마드 코더의 클론 코딩(영화 웹 서비스) 해보기 clear : react에서 라우팅을 하도록 도와주는 패키지 : react-router-dom => 구조 분해 할당을 더욱 효율적으로 이용해보았다. react를 쓸 때는 웬만하면 구조 분해 할당으로 변수를 할당받자 오늘 배운 그리고 복습한 css : 클론 코딩을 가지고, 1) 검색기능 구현해보기 2) 각 ... 클론코딩Link toHashRouterRouteaxios vs fetchCSS@media only screenpush redirect반응형TILreact router domprop-type@media only screen History 만들기 이렇게 사용하던 중 history파일을 따로 만들어 사용하는 법을 배웠다 우선 Router를 꺼내오고 Router안에는 history가 꼭 들어가야 하는데 이 history파일을 따로 만들었다 history파일을 따로 만들고 createBrowerHistory로 BrowerHistory를 만들어준다 위 에 Router에 이 만든 history를 넣어준다 이것을 활용해서 navigate라는 함... ReactBrowerHistoryreact router domBrowerHistory 7월 9일 금요일 TIL <BrowserRouter> BrowserRouter는 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할을 해준다. ReactDOM의 렌더 단계인 index.js 에 넣어서 활용할 수도 있다. BrowserRouter가 상위에 작성되어 있어야 Route 컴포넌트를 사용할 수 있다. <Switch> <Route> 경로를 매칭... 31기TILreact router dom31기TIL